<template>
  <child-head :name="headName" />
  <div class="chatdetail">
    <chat-msg class="chatcontent" ref="chatMsg"></chat-msg>
    <!--底部输入按钮-->
    <div class="chatfooter">
      <div @click="changeSound">
        <span class="icon icon-wodedaibanshixiang"></span>
      </div>
      <div>
        <input
          ref="sendcontent"
          @keypress="sendmsg"
          :type="istype"
          :value="isvalue"
        />
      </div>
      <div>
        <span class="icon icon-wodedaibanshixiang"></span>
      </div>
      <div>
        <span class="go" @click="goSendMsg">发送</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import ChatMsg from "./chat-msg";
import ChildHead from "../../../components/head-app/child-head";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default {
  name: "ChatDetail",
  components: { ChildHead, ChatMsg },
  setup() {
    const store = useStore();
    const { userInfo } = store.getters;
    const router = useRouter();
    let headName = ref("");
    headName.value = router.currentRoute.value.params.name;
    const issound = ref("xiaoxitongzhi");
    const istype = ref("text");
    const isvalue = ref("");
    const isshow = ref(false);
    const tomsg = ref("");
    const msgchild = ref(null);
    // 获取聊天记录
    const chatMsg = ref(null);
    //发送消息
    const sendcontent = ref(null);
    const sendmsg = (e) => {
      let sendcontents = sendcontent.value.value;
      if (e.keyCode === 13 && sendcontents.split(" ").join("").length !== 0) {
        chatMsg.value.lists.push({
          id: 123,
          face: userInfo.avatar,
          word: sendcontents,
          type: true,
        });
        isvalue.value = "";
        sendcontent.value.value = "";
      }
    };
    const goSendMsg = () => {
      let sendcontents = sendcontent.value.value;
      chatMsg.value.lists.push({
        id: 123,
        face: userInfo.avatar,
        word: sendcontents,
        type: true,
      });
      isvalue.value = "";
      sendcontent.value.value = "";
    };
    const changeSound = () => {
      if (!isshow.value) {
        isshow.value = true;
        issound.value = "yuyin";
        istype.value = "button";
        isvalue.value = "按住 说话";
      } else {
        isshow.value = false;
        issound.value = "xiaoxitongzhi";
        istype.value = "text";
        isvalue.value = "";
      }
    };
    return {
      headName,
      istype,
      isshow,
      isvalue,
      issound,
      tomsg,
      msgchild,
      sendcontent,
      sendmsg,
      goSendMsg,
      changeSound,
      chatMsg,
    };
  },
};
</script>

<style scoped lang="scss">
.chatdetail {
  position: relative;
  width: 100%;
  height: 100%;
  .chatcontent {
    width: 100%;
    height: 100%;
  }
  .chatfooter {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 1.3rem;
    line-height: 0rem;
    text-align: center;
    background: #2ab3c0;
    display: flex;
    align-content: center;
    div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    div:nth-child(1),
    div:nth-child(3),
    div:nth-child(4) {
      flex: 1;
    }
    div:nth-child(2) {
      flex: 5;

      input {
        width: 100%;
        outline: none;
        padding-left: 0.05rem;
        box-sizing: border-box;
        border-style: none;
        font-size: $font-size-32;
        border-radius: 4px;
        background-color: #fff;
        height: 0.6rem;
        color: #000;
      }
    }
    .go {
      font-size: $font-size-36;
      font-weight: 550;
    }
  }
}
</style>
